<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>401 - 未授权</title>
    <script src="/static/tailwindcss/3.4.16.js"></script>
    <link href="/static/font-awesome/6.7.2.css" rel="stylesheet">
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 min-h-screen flex flex-col transition-colors duration-300">
<!-- 错误内容 -->
<main class="flex-1 flex flex-col items-center justify-center px-4 py-12">
    <div class="max-w-4xl w-full text-center">
        <!-- 装饰元素 -->
        <div class="relative mb-12">
            <div class="absolute -left-10 top-10 w-20 h-20 bg-accent/10 dark:bg-accent/20 rounded-full animate-float"></div>
            <div class="absolute -right-10 top-0 w-16 h-16 bg-primary/10 dark:bg-primary/20 rounded-full animate-float-delay-1"></div>
            <div class="absolute left-1/4 -bottom-10 w-12 h-12 bg-secondary/10 dark:bg-secondary/20 rounded-full animate-float-delay-2"></div>

            <!-- 错误代码 -->
            <div class="relative">
                <h1 class="text-[clamp(8rem,20vw,15rem)] font-black text-neutral-200 dark:text-neutral-700 mb-6 animate-lock-shake">
                    401</h1>
                <div class="absolute inset-0 flex items-center justify-center">
                    <i class="fa-solid fa-lock text-[clamp(3rem,8vw,6rem)] text-accent animate-pulse-slow"></i>
                </div>
            </div>
        </div>

        <!-- 错误信息 -->
        <div class="bg-white dark:bg-neutral-700 rounded-2xl shadow-xl p-8 md:p-12 mb-8 animate-on-scroll">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-800 dark:text-white mb-4">未授权访问</h2>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto">
                你需要登录才能访问此页面。请使用有效的凭证登录，或者如果你没有账户，请注册一个新账户。
            </p>

            <!-- 建议 -->
            <div class="bg-neutral-50 dark:bg-neutral-600/50 rounded-xl p-6 mb-8 text-left">
                <h3 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fa-solid fa-lightbulb text-accent mr-3"></i>
                    你可以尝试以下操作
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>使用正确的用户名和密码登录</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>检查你的会话是否已过期</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                        <span>确认你有访问此资源的权限</span>
                    </li>
                </ul>
            </div>

            <!-- 按钮组 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="login.html"
                   class="px-8 py-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:shadow-primary/20 transition-all duration-200 scale-hover flex items-center justify-center">
                    <i class="fa-solid fa-sign-in-alt mr-2"></i> 登录账户
                </a>
                <a href="register.html"
                   class="px-8 py-4 bg-accent hover:bg-accent/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:shadow-accent/20 transition-all duration-200 scale-hover flex items-center justify-center">
                    <i class="fa-solid fa-user-plus mr-2"></i> 注册账户
                </a>
                <a href="index.html"
                   class="px-8 py-4 bg-white dark:bg-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-500 text-neutral-800 dark:text-neutral-200 font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200 scale-hover flex items-center justify-center">
                    <i class="fa-solid fa-home mr-2"></i> 返回首页
                </a>
            </div>
        </div>

        <!-- 登录表单 -->
        <div class="bg-white dark:bg-neutral-700 rounded-xl shadow-md p-8 max-w-md mx-auto animate-on-scroll">
            <h3 class="text-xl font-bold mb-6 text-center">快速登录</h3>
            <form>
                <div class="mb-4">
                    <label for="email"
                           class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-envelope text-neutral-400"></i>
                        </div>
                        <input type="email" id="email"
                               class="pl-10 block w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-600 py-3 px-4 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary">
                    </div>
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-lock text-neutral-400"></i>
                        </div>
                        <input type="password" id="password"
                               class="pl-10 block w-full rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-600 py-3 px-4 text-neutral-700 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary">
                    </div>
                </div>
                <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200 py-3 px-4 flex items-center justify-center">
                    <i class="fa-solid fa-sign-in-alt mr-2"></i> 登录
                </button>
            </form>
            <div class="mt-4 text-center text-sm text-neutral-500 dark:text-neutral-400">
                忘记密码？<a href="#" class="text-primary hover:text-primary/80">重置密码</a>
            </div>
        </div>
    </div>
</main>

</body>
</html>
